<template>
  <div id="z">
    <van-nav-bar left-text="用户信息" left-arrow @click-left="onClickLeft" />
    <div id="a">
      <div class="div">
        <p>头像</p>
        <img
          class="touxiang"
          :src="`http://localhost:3000/avatar/${img}`"
          v-show="show"
          alt=""/>
        <van-uploader
          v-model="file"
          preview-size="45px"
          max-count="1"
          :after-read="afterRead"
          accept="image/jpeg/png"/>     
      </div>      
        <van-cell class="div" @click="showPopup(1)"><p>昵称</p><span>{{ uname1 }}</span></van-cell>
        <van-popup v-model="show1">
          <div class="new">新用户名:</div>
          <input
            class="pop"
            v-model="uname1"
            type="text"
            @blur="checkName"
            placeholder="请输入修改后的用户名"
          />
        </van-popup>  
        <van-cell class="div" @click="showPopup(2)"><p>真实姓名</p><span>{{ tname1 }}</span></van-cell>
        <van-popup v-model="show2">
          <div class="new">姓名:</div>
          <input
            class="pop"
            v-model="tname1"
            type="text"
            placeholder="请输入姓名"
          />
        </van-popup>     
      <div class="div">
        <p>账号</p>
        <span>{{ data.uid }}</span>
      </div>     
        <van-cell class="div" @click="showPopup(3)"><p>手机号</p><span>{{ phone1 }}</span></van-cell
        >
        <van-popup v-model="show3">
          <div class="new">新的手机号:</div>
          <input
            class="pop"
            v-model="phone1"
            type="text"
            @blur="checkPhone"
            placeholder="请输入手机号"           
          />
        </van-popup>     
      <div class="div">
        <van-cell class="div" @click="showPopup(4)"><p>生日</p><span>{{ birthday1 }}</span></van-cell></div>
        <van-popup v-model="show4" position="bottom" :style="{ height: '50%'}">
          <van-datetime-picker
            v-model="birthday1"
            type="date"          
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="confirm"
            @cancel="cancel"
            :formatter="formatter"
          />
        </van-popup>   
        <van-cell class="div" @click="showPopup(5)"><p>密码修改</p><span>{{ pwd1 }}</span></van-cell
        >
        <van-popup v-model="show5">
          <div class="new">新密码:</div>
          <input
            class="pop"
            v-model="pwd1"
            type="text"
            @blur="checkPwd"
            placeholder="请输入修改后的密码"/>
        </van-popup>  
    </div>
    <button @click="changeinfor">保存</button>
    <button class="btn" @click="loginout">退出登录</button>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      show:true,
      file:[],
      uname1: "",
      pwd1: "",
      tname1: "",
      birthday1: "",
      phone1: "",
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      data: {},
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2022, 0, 1),
    };
  },
  mounted() {
    this.axios.get("/getinfo?uname=" + this.uname).then((res) => {
      // console.log(res);
      this.data = res.data.result[0];
      // console.log(this.data);
      this.uname1 = this.data.uname;
      this.pwd = this.data.pwd;
      this.tname1 = this.data.tname;
      this.phone1 = this.data.phone;
      this.birthday1 = this.data.birthday;
      // this.img = `avatar/${res.data.img}`;
    });
  },
  computed: {
    ...mapState(["uname", "islogin", "img"]),
  },
  methods: {
    ...mapMutations(["updateUname", "updateImg"]),
    onClickLeft() {
      this.$router.push("me");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
       if (file.file.type !== "image/jpeg" && file.file.type !== "image/png") {
        this.$toast.fail("请上传 jpg、jpeg,png 格式图片");
        return false;
      }
      let files=file.content  
      let imgtype = file.file.name.split(".", 2)[1];
      let uname=this.$store.state.uname
      this.axios.post('/img', `data=${files}&imgtype=${imgtype}&uname=${uname}`).then((res) => {
          //如果传入的响应状态码为200，则成功将文件发送给后台
          if (res.data.status === 200) {
            console.log(res);        
          } else {           
            console.log(res.data.msg); //这块是请求失败后台给返回的相应的数据
          }
        });
      this.show=false
    },
    formatter(type, value) {
      if (type === "year") {
        this.value1 = value; // 可以拿到当前点击的数值
        return `${value}年`;
      } else if (type === "month") {
        this.value2 = value;
        return `${value}月`;
      }
      this.value3 = value;
      return `${value}日`;
    },    
    confirm() {
      var birthday1 = `${this.value1}年${this.value2}月${this.value3}日`;
      console.log(birthday1);
      this.birthday1 = birthday1;
      this.show4 = false;
    },
    cancel() {
      this.show4 = false;
    },
    showPopup(id) {
      // console.log(id);
      if (id == 1) {
        this.show1 = true;
      }
      if (id == 2) {
        this.show2 = true;
      }
      if (id == 3) {
        this.show3 = true;
      }
      if (id == 4) {
        this.show4 = true;
      }
      if (id == 5) {
        this.show5 = true;
      }
      if (id == 6) {
        this.show6 = true;
      }
    },
     loginout() {
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("islogin");
      this.$store.state.uid = "";
      this.$store.state.islogin = "";
      this.$router.push("/me");
    },
     /*验证用户名*/
    checkName() {
      let exp = /^[A-Za-z0-9_\u4e00-\u9fa5]{4,16}$/;
      if (exp.test(this.uname1)) {
        // 验证成功
        return true;
      } else {
        // 验证失败
        Toast("请输入正确的用户名");
      }
    },
     /*验证手机号*/
    checkPhone() {
      console.log(this.phone1)
      let exp = /^1[3-9]\d{9}$/;
      if (exp.test(this.phone1)) {       
        return true;
      } else {
        Toast("手机号格式不正确");
      }
    },
    /*验证密码*/
    checkPwd() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pwd1)) {
        return true;
      } else {
        Toast("密码格式不正确");
      }
    },
    changeinfor() {
      if (this.checkPwd()&&this.checkName()&&this.checkPhone()) {      
      let id = this.data.uid;
      console.log(id);
      // console.log(this.uname1);
      let url = "/update";
      this.axios
        .post(
          url,
          `uname=${this.uname1}&upwd=${this.pwd1}&phone=${this.phone1}&tname=${this.tname1}&birthday=${this.birthday1}&uid=${id}`
        )
        .then((res) => {
          console.log(res);
          Toast('修改成功')
          //跳转页面
          sessionStorage.removeItem("user");
          sessionStorage.removeItem("islogin");
          this.$store.state.uid = "";
          this.$store.state.islogin = "";
          this.$router.push("/me");
          // _this.$options.methods.loginout()
        });
     } 
    },        
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#z {
  min-height: 100vh;
  background-color: rgb(243, 241, 241);
}
#a {
  background-color: white;
  margin: 2vh;
  border-radius: 5px;
}
::v-deep .van-nav-bar__text {
  color: black;
  font-size: 15px;
  margin: 0.5vh 0 0 2vh;
}
::v-deep .van-icon-arrow-left:before {
  color: black;
}
.div {
  height: 7vh;
  line-height: 7vh;
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: space-between;
}
.van-cell__value--alone{
  display: flex;
  justify-content: space-between;
}
.div p {
  display: inline-block;
  margin-left: 10px;
}
.div span {
  margin-right: 10px;
}
button {
  border-radius: 20px;
  margin-top: 15vh;
  padding: 1vh 20vh;
  border: 0;
  background-color: #a7d500;
}
.btn {
  border-radius: 20px;
  margin-top: 4vh;
  padding: 1vh 18vh;
  border: 0;
  background-color: #c7c7c5;
}
.new{
  margin-top: 3vh;
  margin-left: -26vh;
}
.pop {
  margin-top: 2vh;
  padding: 1vh 0 1vh 2vh;
}
.van-popup--center{
  height: 20vh!important;
  width:40vh;
}
.van-uploader {
  margin-left: -30vh;
}
.touxiang {
  width: 15%;
}
</style>